<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Canvas Graph</title>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="../jquery-canvas.js"></script>
		<script type="text/javascript">
			(function($) {
				$.canvasExtend({
					Graph : function(x, y, w, h, points) {
						var p = points.shift(); // First point
						var c = points.length // Amount of point minus the first one
						var pX = 0; // Point X allways starts at 0
						var pY = -(h / 100 * (p -100)); // Point Y in percent
						
						this.save();
						this.translate(x, y);
						
						this.beginPath();
						this.moveTo(pX, pY);
						
						for(var i in points) {
							p = points[i];
							pX = pX +(w / c);
							pY = -(h / 100 * (p -100));
							
							this.lineTo(pX, pY);
						}
						
						this.stroke();
						this.restore();
					}
				});
			})(jQuery);
		</script>
		<script type="text/javascript">
			(function($) {
				$(function() {
					var cv = $('#canvas');

					cv.canvas(function(c) {
						// Make graph background
						c.fillStyle = 'rgba(0, 0, 255, 0.2)';
						c.fillRect(50, 50, 200, 200);
						
						// Make graph
						c.lineWidth = 3;
						c.strokeStyle = 'rgba(255, 0, 0, 0.5)';
						c.Graph(50, 50, 200, 200, [30, 43, 23, 86, 10, 76, 96, 4, 21]);
					});
					
					cv.appendTo('body');
				});
			})(jQuery);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="300" height="300"></canvas>
	</body>
</html>
